.userContent

	div(ng-if="vm.showInfo")
		.cardInfo
			p You do not currently have any federations set up

	md-list
		div(ng-repeat="(accountIndex, account) in vm.accountsToUse")
			// Account
			div(layout="row", layout-align="start center")

				md-list-item(flex="100", layout-fill)
					.account(ng-click="vm.toggleProjectsList($index)", layout="row", layout-align="start center", md-ink-ripple, layout-fill)
						md-button.md-icon-button(aria-label="Folder")
							md-icon.angular-material-icons {{account.showProjectsIcon}}
						p {{account.account}}
				.accountRight(ng-if="account.isAdmin")
					md-button.md-icon-button(aria-label="New project", ng-click="vm.setupNewFederation($event, accountIndex)")
						md-icon.angular-material-icons.md-accent playlist_add
			// Federation
			div(ng-if="account.showProjects")
				div(layout="column", layout-align="start", ng-repeat="(federationIndex, federation) in account.fedProjects")
					div(layout="row", layout-align="start center")
						md-list-item.federation(ng-click="vm.viewFederation($event, accountIndex, federationIndex)", flex)
							md-button.md-icon-button.md-accent(aria-label="Federation")
								md-icon.angular-material-icons border_all
							.md-list-item-text(flex="40")
								p {{federation.project}}
						//md-button.md-icon-button.md-accent(aria-label="Edit", ng-click="vm.editFederation($event, $index)")
							md-icon.angular-material-icons edit
						#federationInfoRight(layout="row")
							p.federationTimestamp {{federation.timestamp | prettyDate:true}}
							md-menu(md-position-mode="target-right target", ng-if="vm.showMenu(federation, account.account)", id="{{vm.dialogCloseTo}}")
								md-button.md-icon-button.md-accent(aria-label="More", ng-click="$mdOpenMenu($event)")
									md-icon.md-menu-origin.angular-material-icons(md-menu-origin) more_vert
								md-menu-content(width="3")
									md-menu-item(ng-repeat="(key, value) in federation.federationOptions", ng-if="!value.hidden")
										md-button(ng-click="vm.doFederationOption($event, key, accountIndex, federationIndex)")
											div(layout="row", flex)
												p(flex, style="color:{{value.color}}") {{value.label}}
												md-icon.angular-material-icons(md-menu-align-target, style="color:{{value.color}}") {{value.icon}}

					// Projects list
					p.federationProjectsList
						span(ng-repeat="subProject in federation.subProjects")
							| {{subProject.project}}
							span(ng-if="!$last")
								| ,
								=" "
			md-divider
